<!-- 图库首页 -->
<template>
	<div class="conent_wrap">
		<!-- <a-tabs default-active-key="1" @change="callback"> -->
		<!-- <a-tab-pane key="1" tab="首页推荐"> -->
		<div class="conent">
			<div class="title">
				示例：
			</div>
			<div class="bottom_content" :class="{ disabled_click: pageStatus == 'query' }">
				<div class="preview_wrap left">
					<img src="~@images/gallery/tv_home@2x.png" class="preview_bg" />
					<!-- <img src="~@images/gallery/demo.jpg" class="preview_bg"> -->
					<div class="preview_area" v-for="(item, i) of imageInfoList" :key="i" :style="previewStyleInfo[i]">
						<div
							class="default"
							v-if="!item.imgAddr"
							:style="{ width: previewStyleInfo[i].width, height: previewStyleInfo[i].height }"
						></div>
						<img
							class="preview_img"
							v-else
							:src="item.imgAddr"
							:style="{ width: previewStyleInfo[i].width, height: previewStyleInfo[i].height }"
						/>
						<!-- isShowName为1时，显示产品名称。不为1时，有图片描述，显示图片描述，否则不显示。 -->
						<div
							v-if="item.isShowName == 1"
							class="product_name bottom_text"
							:style="{ width: previewStyleInfo[i].width }"
						>
							{{ item.productName }}
						</div>
						<div
							v-if="item.isShowName != 1 && item.imgMessage"
							class="product_desc bottom_text"
							:style="{ width: previewStyleInfo[i].width }"
						>
							{{ item.imgMessage }}
						</div>
					</div>
				</div>
				<div class="preview_set right">
					<div class="template_select">
						<div class="title">
							模板样例：
						</div>
						<div class="template_radio">
							<ImageRadioGroup @change="changeRadio" v-model="temlateType">
								<ImageRadio
									value="1"
									width="0.8rem"
									height="0.45rem"
									:checkedImage="checkedImage01"
									:uncheckedImage="uncheckedImage01"
								></ImageRadio>
								<!-- <ImageRadio
									value="2"
									width="0.8rem"
									height="0.45rem"
									:checkedImage="checkedImage01"
									:uncheckedImage="uncheckedImage01"
								></ImageRadio> -->
							</ImageRadioGroup>
						</div>
					</div>
					<div class="add_template">
						<div class="title">
							添加图片：
						</div>
						<div class="select_map">
							<div
								class="map"
								v-for="(item, i) of selectedModelInfo"
								@click="currentSelectedModelNumber = i"
								:key="i"
								:style="item.style"
								:class="{
									exist_image: imageInfoList[i].imgAddr,
									selected: currentSelectedModelNumber === i,
								}"
							>
								<div class="number">{{ item.content }}</div>
								<div class="size">{{ item.desc }}</div>
							</div>
						</div>
					</div>

					<div class="update_image">
						<div class="upload">
							<!-- <ImageUpload
								v-model="currentImgAddr"
								:uploadText="selectedModelInfo[currentSelectedModelNumber].uploadInfo"
							></ImageUpload> -->
							<ImageUpload
								v-model="imageInfoList[currentSelectedModelNumber].imgAddr"
								:uploadText="selectedModelInfo[currentSelectedModelNumber].uploadInfo"
							></ImageUpload>
						</div>
						<label class="label">
							<div class="text">跳转产品</div>
							<div class="product_choose" @click="chooseProduct">
								<div v-if="!imageInfoList[currentSelectedModelNumber].productName" class="choose_tips">
									点击选择产品详情页
								</div>
								<div v-else class="product_name">
									{{ imageInfoList[currentSelectedModelNumber].productName }}
								</div>
							</div>

							<!-- 选择产品和案例的表格弹层 -->
							<a-modal
								class="gold_modal"
								width="80%"
								v-model="showProductModal"
								title=""
								@ok="confirmSelectedProduct"
								@cancel="cancelSelectedProduct"
							>
								<a-tabs v-model="modalSelectedType" @change="pruductTypeChange">
									<a-tab-pane v-if="recommendType != '3'" key="1" tab="图库" forceRender>
										<search-table
											@selectedRowChange="getSelectedRow"
											:url="productListUrl"
											:columns="columns"
											:form="form"
											:defaultParams="{'galleryProductType': 0}"
											ref="productTable"
											tableSelectType="radio"
										>
											<template slot="searchForm">
												<a-form layout="inline" :form="form">
													<a-form-item label="产品名称">
														<a-input v-decorator="['galleryProductName']" placeholder="请输入产品名称">
														</a-input>
													</a-form-item>
												</a-form>
											</template>
										</search-table>
									</a-tab-pane>
									<!-- recommendType 为1是首页，2是图库，3是案例。首页的时候都可选。 -->
									<a-tab-pane v-if="recommendType != '2'" key="2" tab="案例" forceRender>
										<search-table
											@selectedRowChange="getSelectedRow"
											:url="caseListUrl"
											ref="caseTable"
											:columns="caseColumns"
											:form="form2"
											:defaultParams="{'caseProductType': 0}"
											tableSelectType="radio"
										>
											<template slot="searchForm">
												<a-form layout="inline" :form="form2">
													<a-form-item label="案例名称">
														<a-input v-decorator="['caseProductName']" placeholder="请输入案例名称">
														</a-input>
													</a-form-item>
												</a-form>
											</template>
										</search-table>
									</a-tab-pane>
								</a-tabs>
							</a-modal>
						</label>
					</div>
					<div class="desc_info">
						<div class="show_name">
							<div class="label">图片描述显示产品名称：</div>
							<a-radio-group
								class="show_radio"
								v-model="imageInfoList[currentSelectedModelNumber].isShowName"
								@change="showNameChange"
							>
								<a-radio :value="1">
									是
								</a-radio>
								<a-radio :value="0">
									否
								</a-radio>
							</a-radio-group>
						</div>
						<label class="label_wrap">
							<div class="desc_title">图片描述：</div>
							<a-input
								v-model="imageInfoList[currentSelectedModelNumber].imgMessage"
								placeholder="请输入图片描述，最大12字符"
								:maxLength="12"
							/>
							<!-- <input class="desc" type="text" name="" id=""> -->
						</label>
					</div>
				</div>
			</div>
			<div class="btn_wrap">
				<div class="update_status" v-if="pageStatus == 'update'">
					<a-button style="margin-right: 20px" @click="calcelUpdate">
						取消
					</a-button>
					<a-button type="primary" @click="saveUpdate">
						保存
					</a-button>
				</div>
				<div class="query_status" v-else>
					<a-space>
						<a-button type="primary" @click="updateStatus">
							修改
						</a-button>
						<a-button type="primary" @click="publishVisible=true" v-if="recommendIds.length>0">
							发布门店
						</a-button>
					</a-space>
  					<ShopList :visible="publishVisible" :shopIds="shopIds" @cancel="publishVisible=false;" @submit="handleShopSubmit"></ShopList>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ImageRadio from '@components/base/ImageRadio'
import ImageRadioGroup from '@components/base/ImageRadioGroup'
import ImageUpload from '@components/antBase/ImageUpload'
import ShopList from '@/components/ShopList/ShopList';

export default {
	name: 'HomeRecommendVue',
	components: {
		ImageRadioGroup,
		ImageRadio,
		ImageUpload,
		ShopList
	},
	directives: {},
	filters: {},
	mixins: [],
	model: {},
	props: {
		// recommendType 为1是首页，2是图库，3是案例。首页的时候都可选。
		recommendType: {
			type: String,
			default: '1'
		}
	},
	data () {
		return {
			publishVisible:false,
			shopIds:[],
			recommendIds:[],

			originData: [],
			pageStatus: 'query',
			// productType:
			modalSelectedType: '1',
			currentSelectedProductInfo: {},
			caseListUrl: '/cases/product/page',
			productListUrl: '/gallery/product/page',
			// typeOptions: createOptionsByDict(1),
			currentRecord: {},
			form: this.$form.createForm(this, { name: 'product_form' }),
			form2: this.$form.createForm(this, { name: 'case_form' }),
			columns: [
				{
					title: '产品图片',
					dataIndex: 'largeScreenPicture',
					key: 'largeScreenPicture',
					align: 'center',
					customRender: (text, row) => {
						// console.log('text', text)
						return <table-img src={text} />
					}
					// scopedSlots: { customRender: 'operation' }
				},
				{
					title: '产品名称',
					dataIndex: 'galleryProductName',
					align: 'center',
					key: 'galleryProductName'
				},
				{
					title: '所属分类',
					dataIndex: 'galleryClassificationName',
					align: 'center',
					key: 'galleryClassificationName'
					// customRender: (text, record) => findDictNameByValue('1', record.type)
				},
				{
					title: '排序',
					dataIndex: 'sort',
					align: 'center',
					key: 'sort'
				},
				{
					title: '最后保存时间',
					dataIndex: 'updateDate',
					align: 'center',
					key: 'updateDate'
				},
				{
					title: '是否显示',
					align: 'center',
					dataIndex: 'enableShow',
					key: 'enableShow',
					customRender: (text, record) => {
						return text == 1 ? '是' : (text == 0 ? '否' : '')
					}
				},
				{
					title: '上传员工',
					dataIndex: 'createByName',
					align: 'center',
					key: 'createByName'
				}
			],
			caseColumns: [
				{
					title: '产品图片',
					dataIndex: 'largeScreenPicture',
					key: 'largeScreenPicture',
					align: 'center',
					customRender: (text, row) => {
						// console.log('text', text)
						return <table-img src={text} />
					}
					// scopedSlots: { customRender: 'operation' }
				},
				{
					title: '产品名称',
					dataIndex: 'caseProductName',
					align: 'center',
					key: 'caseProductName'
				},
				{
					title: '所属分类',
					dataIndex: 'casesClassificationName',
					align: 'center',
					key: 'casesClassificationName'
					// customRender: (text, record) => findDictNameByValue('1', record.type)
				},
				{
					title: '排序',
					dataIndex: 'sort',
					align: 'center',
					key: 'sort'
				},
				{
					title: '最后保存时间',
					dataIndex: 'updateDate',
					align: 'center',
					key: 'updateDate'
				},
				{
					title: '是否显示',
					align: 'center',
					dataIndex: 'enableShow',
					key: 'enableShow',
					customRender: (text, record) => {
						return text == 1 ? '是' : (text == 0 ? '否' : '')
					}
				},
				{
					title: '上传员工',
					dataIndex: 'username',
					align: 'center',
					key: 'username'
				}
			],
			showProductModal: false,
			currentImgAddr: '',
			imageUrl: '',
			currentSelectedModelNumber: 0,
			uncheckedImage01: require('@images/gallery/icon_examples_template_normal_01.png'),
			checkedImage01: require('@images/gallery/icon_examples_template_selected_01.png'),
			temlateType: '1',
			imageInfoList: [
				{
					location: 1,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '', // 产品类型(1:图库，2:案例)
					productName: '',
					linkAddr: '',
					isShowName: 0 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 2,
					imgAddr: '',
					imgMessage: '测试图片',
					productId: '111',
					productType: '', // 产品类型(1:图库，2:案例)
					productName: '',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 3,
					imgAddr: '',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 0 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 4,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 5,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 6,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 7,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				},
				{
					location: 8,
					imgAddr: 'http://localhost:8888/img/demo.13656b0a.jpg',
					imgMessage: '测试图片',
					productId: '111',
					productType: '1', // 产品类型(1:图库，2:案例)
					productName: '111',
					linkAddr: '',
					isShowName: 1 // 是否显示产品名称(0:否，1:是)
				}
			],
			previewStyleInfo: [
				{
					position: 'absolute',
					top: '0.66rem',
					left: '1.02rem',
					width: '2.64rem',
					height: '1.66rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '0.66rem',
					left: '3.78rem',
					width: '1.26rem',
					height: '0.78rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '0.66rem',
					left: '5.16rem',
					width: '1.26rem',
					height: '0.78rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '1.54rem',
					left: '3.78rem',
					width: '1.26rem',
					height: '0.78rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '1.54rem',
					left: '5.16rem',
					width: '1.26rem',
					height: '0.78rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '2.44rem',
					left: '1.03rem',
					width: '1.72rem',
					height: '0.98rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '2.44rem',
					left: '2.87rem',
					width: '1.72rem',
					height: '0.98rem',
					borderRadius: '7px'
				},
				{
					position: 'absolute',
					top: '2.44rem',
					left: '4.71rem',
					width: '1.72rem',
					height: '0.98rem',
					borderRadius: '7px'
				}
			],
			selectedModelInfo: [
				{
					style: {
						width: '143px',
						height: '90px',
						top: '0',
						left: '0'
					},
					content: '图-01',
					desc: '754*474像素',
					uploadInfo: '添加-01'
				},
				{
					style: {
						width: '71px',
						height: '45px',
						top: '0',
						left: '143px'
					},
					content: '图-02',
					desc: '366*222像素',
					uploadInfo: '添加-02'
				},
				{
					style: {
						width: '71px',
						height: '45px',
						top: '0',
						left: '214px'
					},
					content: '图-03',
					desc: '366*222像素',
					uploadInfo: '添加-03'
				},
				{
					style: {
						width: '71px',
						height: '45px',
						top: '45px',
						left: '143px'
					},
					content: '图-04',
					desc: '366*222像素',
					uploadInfo: '添加-04'
				},
				{
					style: {
						width: '71px',
						height: '45px',
						top: '45px',
						left: '214px'
					},
					content: '图-05',
					desc: '366*222像素',
					uploadInfo: '添加-05'
				},
				{
					style: {
						width: '95px',
						height: '55px',
						top: '90px',
						left: '0'
					},
					content: '图-06',
					desc: '492*280像素',
					uploadInfo: '添加-06'
				},
				{
					style: {
						width: '95px',
						height: '54px',
						top: '90px',
						left: '95px'
					},
					content: '图-07',
					desc: '492*280像素',
					uploadInfo: '添加-07'
				},
				{
					style: {
						width: '95px',
						height: '54px',
						top: '90px',
						left: '190px'
					},
					content: '图-08',
					desc: '492*280像素',
					uploadInfo: '添加-08'
				}
			]
		}
	},
	computed: {
		// currentMixImageInfo () {
		// 	return this.mixImageInfoList[this.currentSelectedModelNumber]
		// },
		mixImageInfoList () {
			return this.imageInfoList.map((item, i) => ({
				...item,
				style: this.previewStyleInfo[i],
				selectedModelStyle: this.selectedModelInfo[i].style,
				selectedModelContent: this.selectedModelInfo[i].content,
				selectedModelDesc: this.selectedModelInfo[i].desc,
				uploadInfo: this.selectedModelInfo[i].uploadInfo
			}))
		}
	},
	watch: {
		currentSelectedModelNumber (n, o) {
			this.currentImgAddr = this.imageInfoList[this.currentSelectedModelNumber].imgAddr
		},
		currentImgAddr (n, o) {
			console.log('改变了')
			// this.$set(this.currentMixImageInfo, 'imgAddr', n)
		}
	},
	beforeCreate () {},
	created () {
		this.initDataByRecommendType()
	},
	beforeMount () {},
	mounted () {
		this.queryModalInfo()
		// this.currentImgAddr = this.mixImageInfoList[this.currentSelectedModelNumber].imgAddr
	},
	beforeUpdate () {},
	updated () {},
	activated () {},
	deactivated () {},
	beforeDestroy () {},
	destroyed () {},
	// 方法集合
	methods: {
		//发布到门店
		async handleShopSubmit(ids){
			if(this.recommendIds.length==0){
				this.$message.error('推荐id不能为空')
				return;
			}
			let res=await this.$post('/recommend/shoppublish/publish',{
				recommendId:this.recommendIds,
				recommendShopIdList:ids,
			});
			if(res && res.returnCode=='1000'){				
        		this.$message.success('发布成功！');
				this.publishVisible=false;
			}
		},
		initDataByRecommendType () {
			// recommendType 为1是首页，2是图库，3是案例。首页的时候都可选。
			if (this.recommendType == '1' || this.recommendType == '2') {
				this.modalSelectedType = '1'
			}
			if (this.recommendType == '3') {
				this.modalSelectedType = '2'
			}
			// this.modalSelectedType =
		},
		async queryModalInfo () {
			const res = await this.$get('/recommend/query', {
				recommendType: this.recommendType
			})
			if (res.returnCode == 1000) {
				this.imageInfoList = res.dataInfo.imgInfos
				let defaultItem = {
					imgAddr: '',
					imgMessage: '',
					productId: '',
					productType: '', // 产品类型(1:图库，2:案例)
					productName: '',
					isShowName: '' // 是否显示产品名称(0:否，1:是)
				}
				for (let i = this.imageInfoList.length; i < 8; i++) {
					console.log('i is', i)
					this.imageInfoList.push({
						location: i + 1,
						...defaultItem
					})
				}
				console.log('this.imageInfoList is', this.imageInfoList)
				this.originData = JSON.parse(JSON.stringify(this.imageInfoList))
				this.currentImgAddr = this.imageInfoList[this.currentSelectedModelNumber].imgAddr
				this.recommendIds=Array.from(new Set(res.dataInfo.imgInfos.map(item=>{
					return item.id;
				}))).filter(item=>item);

				this.pageStatus = 'query'
			}
			console.log('queryModalInfo', res)
		},
		async saveUpdate () {
			// const submitData = Object.assign({}, )
			const res = await this.$post('/recommend/add', {
				recommendType: this.recommendType,
				imgInfos: this.imageInfoList
			})
			if (res.returnCode == 1000) {
				this.queryModalInfo()
			}
			console.log('saveUpdate', res)
			console.log('this.imageInfoList', this.imageInfoList)
		},
		calcelUpdate () {
			this.pageStatus = 'query'
			this.imageInfoList = JSON.parse(JSON.stringify(this.originData))
		},
		updateStatus () {
			this.pageStatus = 'update'
			// console.log('this.pageStatus', this.pageStatus)
			// if (this.pageStatus == 'query') {
			//   this.imageInfoList = JSON.parse(JSON.stringify(this.originData))
			//   this.currentImgAddr = this.mixImageInfoList[this.currentSelectedModelNumber].imgAddr
			// }
		},
		showNameChange () {},
		cancelSelectedProduct () {},
		getSelectedRow (rows) {
			console.log('选择的', rows)
			if (rows.length > 0) {
				this.currentSelectedProductInfo = rows[0]
			}
			console.log('row', this.currentSelectedProductInfo)
		},
		// 确认的时候，才将弹窗中的数据传过去，避免取消的时候影响到了。
		confirmSelectedProduct () {
			const selectedIndex = this.currentSelectedModelNumber
			console.log('currentSelectedProductInfo', this.currentSelectedProductInfo, this.modalSelectedType)
			// const productName = this.currentSelectedProductInfo.galleryProductName || this.currentSelectedProductInfo.caseProductName
			this.imageInfoList[selectedIndex].productId = this.currentSelectedProductInfo.id

			if (this.modalSelectedType == '1') {
				this.imageInfoList[selectedIndex].productName = this.currentSelectedProductInfo.galleryProductName
				this.imageInfoList[selectedIndex].productType = '1'
			} else if (this.modalSelectedType == '2') {
				this.imageInfoList[selectedIndex].productName = this.currentSelectedProductInfo.caseProductName
				this.imageInfoList[selectedIndex].productType = '2'
			}
			// this.imageInfoList[this.currentSelectedModelNumber].productName = productName
			this.showProductModal = false
		},
		// closeInfoModal (freshTable) {
		// 	this.infoVisible = false
		// 	if (freshTable) {
		// 		this.$refs.searchtable.refreshTable()
		// 	}
		// },
		chooseProduct () {
			this.showProductModal = true
		},
		changeRadio (val) {
			console.log('val', val)
		},
		pruductTypeChange (val) {
			console.log('pruductTypeChange', val)
			if (val == '1') {
				this.currentSelectedProductInfo = this.$refs.productTable.selectedRows[0] || {}
			} else {
				console.log('this.$refs.caseTable', this.$refs.caseTable)
				this.currentSelectedProductInfo = this.$refs.caseTable.selectedRows[0] || {}
			}
			console.log('currentSelectedProductInfo', this.currentSelectedProductInfo)
		}
	}
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
//@import url();

/deep/ .gold_modal {
	.ant-modal-wrap {
		.ant-modal-footer {
			text-align: center;
		}
	}
}

.conent_wrap {
	.conent {
		// padding: 20px 0;
		.title {
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
		}
		.disabled_click {
			pointer-events: none;
		}
		.bottom_content {
			display: flex;
			.preview_wrap {
				margin-top: 10px;
				margin-right: 0.24rem;
				position: relative;
				.preview_bg {
					width: 6.76rem;
					height: 3.8rem;
				}
				.preview_area {
					.default {
						background-color: #d8d8d8;
					}
					// .preview_img {
					// }
					.bottom_text {
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: rgba(0, 0, 0, 0.3);
						color: #fff;
						padding-left: 10px;
						height: 30px;
						line-height: 30px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			// .left {
			// }
			.preview_set {
				background-color: #f6f7f8;
				width: 350px;
				padding: 16px;
				.template_select {
					.title {
						font-size: 14px;
						font-family: MicrosoftYaHei;
						color: #000000;
						line-height: 20px;
					}
					.template_radio {
						margin-top: 0.09rem;
						background-color: #fff;
						padding: 0.1rem;
					}
				}

				.add_template {
					margin-top: 0.26rem;
					.title {
						font-size: 14px;
						font-family: MicrosoftYaHei;
						color: #000000;
						line-height: 20px;
					}
					.select_map {
						position: relative;
						width: 2.86rem;
						height: 1.44rem;
						margin-top: 10px;
						cursor: pointer;
						.map {
							position: absolute;
							text-align: center;
							border: 1px solid #c6c6c6;
							display: flex;
							flex-direction: column;
							justify-content: center;
							font-size: 10px;
							font-family: MicrosoftYaHei;
							letter-spacing: -0.5px;
							.number {
								color: #016bff;
							}
							.size {
								color: #666666;
							}
						}
						.exist_image {
							background-color: #e0edff;
						}
						.selected {
							border-color: #016bff;
						}
					}
					// div {
					// }
				}
				.update_image {
					display: flex;
					background-color: #fff;
					margin-top: 12px;
					padding: 12px;
					.upload {
						margin-right: 12px;
					}
					.label {
						display: flex;
						height: 24px;
						line-height: 24px;
						.text {
							margin-right: 16px;
							white-space: nowrap;
							font-size: 12px;
							font-family: MicrosoftYaHei;
							color: #333333;
						}
						.product_choose {
							color: #016bff;
							cursor: pointer;
							// .choose_tips {
							// }
							// div {
							// }
							// .product_name {
							// }
						}
						// .gold_modal {
						// }
						// .link {
						//
						//   border: none;
						//   outline:none;
						//   font-size: 12px;
						//   font-family: MicrosoftYaHei;
						//   color: #016BFF;
						//   overflow: hidden;
						//   text-overflow:ellipsis;
						//   // &:focus{
						//   //   border: none;
						//   // } }
					}
				}
				.desc_info {
					background-color: #fff;
					margin-top: 12px;
					padding: 12px;

					font-size: 14px;
					font-family: MicrosoftYaHei;
					color: #000000;

					line-height: 32px;

					.show_name {
						display: flex;
						height: 32px;
						.label {
              white-space: nowrap;
						}
						// .show_radio {
						// }
						/deep/ .show_radio {
							line-height: inherit;
						}
					}
					.label_wrap {
						margin-top: 10px;
						display: flex;
						.desc_title {
							line-height: 32px;
							height: 32px;
							white-space: nowrap;
						}
						// .desc {
						// }
					}
				}
			}
			// .right {
			// }
		}
		.btn_wrap {
			text-align: center;
			margin-top: 0.3rem;
			// .update_status {
			// }
			// .query_status {
			// }
		}
		.remtest {
			background-color: red;
			width: 0.6rem;
			height: 0.6rem;
		}
		.remtest2 {
			background-color: blue;
			width: 1rem;
			height: 1rem;
		}
	}
}
</style>
